/**
 * Created by lee_mxue on 17/5/8.
 */
import React from "react";
import ReactDOM from "react-dom";
import wx from "wx";
import { addErrorListener } from "../../lib/handleError"
import weixinShare from "../../lib/weixinShare";
import AJAX from "../../lib/ajax";
import tools from "../../lib/tools"
require('../../lib/rem');
require('./CabinetNearbyDetail.less');
require('../../styles/common.less');
require('../../styles/resetWeui.less');
require('../../styles/lux.less')
let MyCarousel = require('../../components/PictureSlick')
const Toast = require('../MyPackage/components/Toast')


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: false,     //是否可以加载页面
            cabinet_data: {
                "id": 0,
                "name": '',     //str 名称,
                "code": '',     //str 柜体编号,
                "addr": '',     //str 详细地址,
                "cell_summary": [],     // # 格口信息概要
            },
        };

    }

    componentWillMount() {
        var _this = this;
        addErrorListener()()
        //隐藏分享功能
        weixinShare.hideAll();
        //获取柜体详情
        //获取柜体id
        var cabinet_id = tools.getParams().cabinet_id;
        AJAX.request('cabinet_detail', {cabinet_id: cabinet_id}, data => {
            _this.setState({
                cabinet_data: data.body
            })
        })
    }


    componentDidMount() {
        AJAX.appendBaiduAnalysis()

        this.setState({
            isReady: true,     //是否可以加载页面
        })
    }

    //toast弹窗
    warn(content) {
        Toast.warn({
            content: content
        })
    }

    success() {
        Toast.success({
            content: "成功"
        })
    }

    error() {
        Toast.error({
            content: "失败"
        })
    }

    loading() {
        Toast.loading({
            content: "数据加载中"
        })
    }


    render() {
        return (
            this.state.isReady &&
            <div className="main">
                <div className=" top_active borderT borderB">
                    <p>设备名称：{this.state.cabinet_data.name}</p>
                    <p>设备位置：{this.state.cabinet_data.addr}</p>
                    <p>设备编码：{this.state.cabinet_data.code}</p>
                </div>

                <div className="center_content ">
                    <p className="title">可用箱体：</p>
                    <ul className="clear">
                        {this.state.cabinet_data.cell_summary.map(item => {
                            return(
                                <li className="floatL">
                                    <p>{item.idle_count}</p>
                                    <p>{item.type_desc}</p>
                                </li>
                            )
                        })}
                    </ul>
                </div>
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
if (module.hot) {
    module.hot.accept();
}